<template>
    <div :class="{ 'ly-is-full': isFull }">
      <div class="tableSelect" ref="tableSelect">
        <el-form :inline="true" :model="formInline" label-position="left">
          <!-- <el-form-item label="地区：">
                      <el-input v-model.trim="formInline.region_name" maxlength="60" clearable placeholder="地区名称"
                          @change="search" style="width:200px"></el-input>
                  </el-form-item>
                  <el-form-item label="权限选择：">
                      <el-select v-model="formInline.group_name" placeholder="请选择权限" clearable style="width: 120px"
                          @change="search">
                          <el-option v-for="item in GroupList" :key="item.id" :label="item.name" :value="item.name">
                          </el-option>
                      </el-select>
                  </el-form-item> --> 
          <el-form-item label="名称：">
            <el-input
              v-model.trim="formInline.username"
              maxlength="60"
              clearable
              placeholder="管理员名称"
              @change="search"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label=""
            ><el-button @click="search" type="primary" icon="Search"
              >查询</el-button
            ></el-form-item
          >
          <el-form-item label=""
            ><el-button @click="handleEdit('', 'reset')" icon="Refresh"
              >重置</el-button
            ></el-form-item
          >
          <el-form-item label=""  
            ><el-button @click="addModule" type="primary"
              >添加</el-button
            ></el-form-item
          >
          <el-form-item label=""  
            ><el-button @click="handleEdit2" type="primary"
              >个人编辑</el-button
            ></el-form-item
          >
          <!-- <el-form-item label=""><el-button @click="handleDelete" type="danger" :disabled="multiple" v-show="isShowBtn('goodsType','商品分类','Delete')">删除</el-button></el-form-item> -->
        </el-form>
      </div>
  
      <div class="table">
        <el-table
          :height="tableHeight"
          border
          :data="tableData"
          v-loading="loadingPage"
          style="width: 100%"
          ref="tableref"
          @selection-change="handleSelectionChange"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <!--                <el-table-column type="selection" width="55"></el-table-column>-->
          <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
          <el-table-column type="index" width="60" align="center" label="序号">
            <template #default="scope">
              <span v-text="getIndex(scope.$index)"></span>
            </template>
          </el-table-column>
          <el-table-column
            min-width="100"
            prop="username"
            label="名称"
          ></el-table-column>
          <!-- <el-table-column min-width="100" prop="group_name" label="职位"></el-table-column> -->
  
          <!-- <el-table-column min-width="100" prop="region_name" label="所属区域"></el-table-column> -->
  
          <el-table-column
            min-width="100"
            prop="mobile"
            label="电话号码"
          ></el-table-column>
          <el-table-column min-width="100" label="更新时间">
            <template #default="scope">
              <span
                v-text="formatDateTime(tableData[scope.$index].updatetime)"
              ></span>
            </template>
          </el-table-column>
  
          <!-- <el-table-column min-width="60" sortable prop="sort" label="排序"></el-table-column>
                  <el-table-column min-width="80" prop="default_image" label="图标">
                      <template #default="scope">
                          <el-image  :src="scope.row.default_image" style="width: 30px;height:30px" :preview-src-list="[scope.row.default_image]" v-if="scope.row.default_image"></el-image>
                      </template>
                  </el-table-column> -->
          <!--                <el-table-column min-width="100" label="状态" prop="status">-->
          <!--                    <template slot-scope="scope">-->
          <!--                        <el-tag v-if="scope.row.status" size="small">正常</el-tag>-->
          <!--                        <el-tag v-else type="danger" size="small">禁用</el-tag>-->
          <!--                    </template>-->
          <!--                </el-table-column>-->
          <el-table-column
            min-width="150"
            prop="createtime"
            label="创建时间"
          ></el-table-column>
          <el-table-column label="操作" width="180" v-if="userId == 1" >
            <template #header>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div>操作</div>
                <div @click="setFull">
                  <el-tooltip content="全屏" placement="bottom">
                    <el-icon><full-screen /></el-icon>
                  </el-tooltip>
                </div>
              </div>
            </template>
            <template #default="scope">
              <!--                        <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')" v-show="isShowBtn('viptypeManage','会员卡管理','Retrieve')">详情</span>-->
              <span
                class="table-operate-btn"
                @click="handleEdit(scope.row, 'edit')"
                >编辑</span
              >
              <span
                class="table-operate-btn"
                @click="handleEdit(scope.row, 'delete')"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination> -->
      <add-module-goods-type
        ref="addModuleFlag"
        @refreshData="refreshData"
      ></add-module-goods-type>
    </div>
  </template>
  <script>
  import Pagination from "@/components/Pagination.vue";
  import { dateFormats } from "@/utils/util";
  import { cjgluser, cjgluserDel, adminGroup } from "@/api/api";
  import { setStorage, getStorage } from "@/utils/util";
  
  import XEUtils from "xe-utils";
  import AddModuleGoodsType from "./components/add.vue";
  import { lyMixins } from "@/mixins/mixins";
  import dayjs from "dayjs";
  export default {
    mixins: [lyMixins],
    components: {
      AddModuleGoodsType,
      Pagination,
    },
    name: "adminManage",
    data() {
      return {
        userId:'',
        isFull: false,
        loadingPage: false,
        // 选项框选中数组
        ids: [],
  
        // 选项框非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        formInline: {
          page: 1,
          page: 1,
          per_page: 99999,
        },
        pageparm: {
          page: 1,
          per_page: 99999,
          total: 0,
        },
        statusList: [
          { id: 1, name: "正常" },
          { id: 0, name: "禁用" },
        ],
        timers: [],
        tableData: [],
        selectData: [],
        GroupList: [], //管理员分组列表
      };
    },
    methods: {
      authority(groupArr = [0]) {
        // 权限筛选
        let userInfo = this.userInfo;
        // 当前权限和传来的权限组进行对比
        if (groupArr.some((item) => Number(item) === userInfo)) return true;
        return false;
      },
      formatDateTime(time) {
        return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
      },
      refreshData(x) {
        // 新增成功 搜索归0
        if (x) this.handleEdit("", "reset");
        else this.getData();
      },
      setFull() {
        this.isFull = !this.isFull;
        window.dispatchEvent(new Event("resize"));
      },
      // 表格序列号
      getIndex($index) {
        // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
        return (this.pageparm.page - 1) * this.pageparm.per_page + $index + 1;
      },
      //多选项框被选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 批量删除按钮操作 */
      handleDelete(row) {
        const ids = this.ids;
        let vm = this;
        vm.$confirm("是否确认删除选中的数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
          return regionDel({ id: ids }).then((res) => {
            if (res.code == 1) {
              vm.$message.success(res.msg);
              vm.search();
            } else {
              vm.$message.warning(res.msg);
            }
          });
        });
      },
      changeStatus(row) {
        console.log(row, "row----");
      },
      addModule() { 
        this.$refs.addModuleFlag.addModuleFn(null, "新增", this.GroupList);
      },
      handleEdit2(row, flag) {
        this.$refs.addModuleFlag.addModuleFn(this.userinfoObjs, "编辑", this.GroupList);
        
      },
      handleEdit(row, flag) {
        if (flag == "detail") {
          this.$refs.addModuleFlag.addModuleFn(row, "详情", this.GroupList);
        } else if (flag == "edit") {
          this.$refs.addModuleFlag.addModuleFn(row, "编辑", this.GroupList);
        } else if (flag == "delete") {
          let vm = this;
          vm.$confirm("您确定要删除选中的数据吗？", {
            closeOnClickModal: false,
          })
            .then((res) => {
              cjgluserDel({ id: row.id }).then((res) => {
                if (res.code == 1) {
                  vm.$message.success(res.msg);
                  vm.search();
                } else {
                  vm.$message.warning(res.msg);
                }
              });
            })
            .catch(() => {});
        } else if (flag == "reset") {
          this.formInline = {
            page: 1,
            per_page: 10,
          };
          this.pageparm = {
            page: 1,
            per_page: 10,
            total: 0,
          };
          this.getData();
        }
      },
  
      callFather(parm) {
        this.formInline.page = parm.page;
        this.formInline.per_page = parm.per_page;
        this.getData();
      },
      search() {
        this.formInline.page = 1;
        this.formInline.per_page = 10;
        this.getData();
      },
      //获取列表
      async getData() {
        this.loadingPage = true;
        cjgluser(this.formInline).then((res) => {
          this.loadingPage = false;
          if (res.code == 1) {
            // this.tableData = res.data.data;
      this.userinfoObjs =res.data.data.find(item => item.id == this.userId)//自身数据对象

            this.tableData =res.data.data.filter(item => item.id != 1) 
            // console.log(this.tableData, "this.tableData");
            // // 将列表数据转换为树形数据
            // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
            this.pageparm.page = res.data.current_page;
            this.pageparm.per_page = res.data.per_page;
            this.pageparm.total = res.data.total;
          }
        });
      },
  
      timeChange(val) {
        if (val) {
          this.formInline.beginAt = dateFormats(val[0], "yyyy-MM-dd hh:mm:ss");
          this.formInline.endAt = dateFormats(val[1], "yyyy-MM-dd hh:mm:ss");
        } else {
          this.formInline.beginAt = null;
          this.formInline.endAt = null;
        }
        this.search();
      },
      getGroupList() {
        // 管理员分组获取
        adminGroup().then((res) => {
          if (res.code == 1) {
            //console.log(res, "------------成功获取到管理员分组列表");
            this.GroupList = res.data;
          }
        });
      },
    },
    created() {
      this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
      this.userId = Number(JSON.parse(getStorage("userId"))); //权限
      // this.userinfoObjs ={...JSON.parse(getStorage("userinfo"))}
      //  console.log(this.userinfoObjs ,'userinfoObjs')
      // 获取管理员分组
      this.getGroupList();
      // 数据获取
      this.getData();
    },
  };
  </script>
  